import React, {useEffect} from 'react';
import {Form, Input, InputNumber, Modal, Radio} from 'antd';
import type {RoleListItem} from "../data";
import TextArea from "antd/es/input/TextArea";

interface UpdateUserFormProps {
  open: boolean;
  onCreate: (values: RoleListItem) => void;
  onCancel: () => void;
  item?: RoleListItem;
}

const UpdateRoleForm: React.FC<UpdateUserFormProps> = ({open, onCreate, onCancel, item}) => {
  const [form] = Form.useForm();
  const FormItem = Form.Item;

  useEffect(() => {
    if (item) {
      form.setFieldsValue(item);
    }
  }, [open]);

  const handleOk = () => {
    form.validateFields()
      .then((values) => {
        form.resetFields();
        onCreate(values);
      })
      .catch((info) => {
        console.log('Validate Failed:', info);
      });
  }

  const roleFormContent = () => {
    return (
      <>
        <FormItem
          label="id"
          name="id"
          hidden={true}
        >
          <Input/>
        </FormItem>
        <FormItem
          label="角色名称"
          name="roleName"
          rules={[{required: true, message: '请输入角色名称!'}]}
        >
          <Input/>
        </FormItem>

        <FormItem
          label="排序"
          name="sort"
          rules={[{required: true, message: '请输入排序!'}]}>
          <InputNumber defaultValue={1}/>
        </FormItem>
        <FormItem
          label="状态"
          name="statusId"
          rules={[{required: true, message: '请输入状态!'}]}>
          <Radio.Group defaultValue={1}>
            <Radio value={1}>启用</Radio>
            <Radio value={0}>禁用</Radio>
          </Radio.Group>
        </FormItem>
        <FormItem
          label="备注"
          name="remark"
        >
          <TextArea rows={2}/>
        </FormItem>
      </>
    )
  }

  const modalFooter = {title: "更新", okText: '保存', onOk: handleOk, onCancel, cancelText: '取消', open, width: 480};
  const formLayout = {labelCol: {span: 7}, wrapperCol: {span: 13}, form};

  return (
    <Modal {...modalFooter} style={{top: 150}}>
      <Form {...formLayout} style={{marginTop: 30}}>
        {roleFormContent()}
      </Form>
    </Modal>
  );
};

export default UpdateRoleForm;
